//	添加数据集modal

import React, { useCallback, useEffect, useImperativeHandle, useState } from 'react';
import { Modal, Form, Input, TreeSelect, Empty, Button } from 'antd';
import { SearchOutlined } from '@ant-design/icons';
import 'src/pages/AnalyseManage/EditReport/index.module.scss';
import { getFirstTable, getTableName } from 'src/libs/utils';
import { getDataTree } from 'src/services/AnalyseManage';
import FieldComponent from './FieldComponent';

interface IProps {
	dataTables: Array<any>;
	pushField: ( field ) => void;
}


// eslint-disable-next-line react/display-name
const AddDataSet = React.forwardRef( ( props: IProps, ref ) => {
	const [ isModalVisible, setModalVisible ] = useState( false );
	const [ tableCode, setTableCode ] = useState( '' );	//	已选中的数据表
	const [ fields, setFields ] = useState( [] );	//	字段
	const [ filterdFields, setFilterdFields ] = useState( [] );	//	符合模糊搜索条件的字段
	const [ searchText, setSearchText ] = useState( '' );

	const { dataTables } = props;

	const layout = {
		labelCol: { span: 6 },
		wrapperCol: { span: 18 }
	};

	useImperativeHandle( ref, () => ( {
		openModal: () => {
			setModalVisible( true );
		}
	} ) );

	const handleSelectChange = ( value ) => {
		setSearchText( '' );
		setTableCode( value );
		getFields( value );
	};

	const handleCancel = () => {
		setModalVisible( false );
	};

	const handleSearchInput = ( event ) => {
		setSearchText( event.target.value );
		const filterArray = fields.filter( v => v.desc.includes( event.target.value ) );
		setFilterdFields( filterArray );
	};

	const handleChooseField = ( field ) => {
		handleCancel();
		const tableName = getTableName( dataTables, field.modelId );
		props.pushField( Object.assign( {}, field, { modelName: tableName } ) );
	};

	const getFields = useCallback( async ( tableCode ) => {

		const reqParams = {
			isDataResource: 'N',
			modelId: tableCode,
		};
		let response = await getDataTree( reqParams );
		if ( response.data?.success ) {
			let fields = [];
			response.data.data.forEach( v => {
				fields = fields.concat( v.children );
			} );
			setFields( fields );
			setFilterdFields( fields );
		}
	}, [] );

	// 如果不存在 则需要初始化为第一个 tableCode
	const setInitTable = useCallback( () => {
		let defaultValue;
		if ( !tableCode ) {
			defaultValue = dataTables && dataTables.length > 0 ? getFirstTable( dataTables ) : '';

			if ( defaultValue ) {
				setTableCode( defaultValue );
				getFields( defaultValue );
			}
		}

	}, [ tableCode, dataTables, getFields ] );

	useEffect( () => {

		setInitTable();

	}, [ setInitTable ] );


	return (
		<Modal title="添加数据集" visible={ isModalVisible } onCancel={ handleCancel } footer={ [
			<Button key="back" onClick={ handleCancel }>
				取消
			</Button>
		] }>
			<Form { ...layout } labelAlign='left'>
				<Form.Item label="选择数据集">
					<TreeSelect
						showSearch
						allowClear
						treeIcon
						treeNodeFilterProp='title'
						treeData={ props.dataTables }
						onChange={ handleSelectChange }
						treeDefaultExpandedKeys={ [ tableCode ] }
						defaultValue={ tableCode }
						value={ tableCode }>
					</TreeSelect>
				</Form.Item>

				<Form.Item label="选择匹配字段">
					<Input
						placeholder="请输入内容"
						allowClear
						onChange={ handleSearchInput }
						prefix={ <SearchOutlined/> }
						value={ searchText }
					/>
				</Form.Item>
			</Form>

			<div className='data_set_fields'>
				{
					filterdFields.length > 0 ? filterdFields.map( field => {
						return (
							<div className='field' key={ field.id } onClick={ () => handleChooseField( field ) }>
								<FieldComponent dataType={ field.dataType }></FieldComponent>
								<span>{ field.desc }</span>
							</div>
						);
					} ) : (
						<Empty image={ Empty.PRESENTED_IMAGE_SIMPLE }/>
					)
				}
			</div>
		</Modal>
	);
} );


export default AddDataSet;